<template>
  <div style="margin: 20px">
    <el-descriptions class="margin-top" title="我的详细资料" :column="1" border>
      <el-descriptions-item label="用户名">{{
        userData.username
      }}</el-descriptions-item>
      <el-descriptions-item label="真实姓名">{{
        userData.realname
      }}</el-descriptions-item>
      <el-descriptions-item label="电话">{{
        userData.phone
      }}</el-descriptions-item>
      <el-descriptions-item label="最近登录时间">{{
        userData.gmtLastLogin
      }}</el-descriptions-item>
      <el-descriptions-item label="角色">{{
        userData.roles
      }}</el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-tag effect="dark">{{
          userData.status == 1 ? "正常" : "异常"
        }}</el-tag>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState({
      userData: (store) => store.admin.user, //用户数据
    }),
  },
};
</script>

<style scoped>
/* .el-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
} */
</style>
